<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<listTpml :data="pageData" ref="listTpml" @onCommand="listCommand"></listTpml>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			<!-- <addlxrDialog ref="addlxrDialog" @addSucess="refresh"></addlxrDialog> -->
			<el-dialog
                  title="报警联系人"
                  :visible.sync="isshow"
                   width="41%"
                  :before-close="handleClose">
                  <el-form :model="newObj" 
                           :rules="rules"
                           ref="ruleForm"
                           label-width="120px" 
                           class="demo-ruleForm">
                      <el-form-item label="姓名：" prop="linkName">
                        <el-input v-model="newObj.linkName"  size="small" style="width:200px"></el-input>
                      </el-form-item>
                      <el-form-item label="手机号码：" prop="mobile">
                        <el-input v-model="newObj.mobile" size="small" style="width:200px" ></el-input>
                      </el-form-item>
                      <el-form-item label="邮箱：" prop="email">
                        <el-input v-model="newObj.email" size="small" style="width:200px" ></el-input>
                      </el-form-item>
                      <el-row>
                          <el-col :span="12">
                               <el-form-item label="邮箱验证码：" prop="checkCode">
                               <el-input v-model="newObj.checkCode" size="small" style="width:200px"></el-input>
                               </el-form-item>
                          </el-col>
                          <el-col :span="8">
                               <el-form-item >
                                    <el-button type="primary" :plain="true"  @click="handleCode" :disabled="disabled">
                                        <span>{{btntext}}</span>
                                    </el-button>
                               </el-form-item>
                          </el-col>
                      </el-row>
                      
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                  <el-button @click="handeleBtn" >取 消</el-button>
                  <el-button type="primary" @click="submitForm">确 定</el-button>
                 </span>
              </el-dialog>
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
import { saveAlarmContactMan, sendCheckCode } from "@/service/swagger/AlarmController"
import { setTimeout } from 'timers';

import listTpml from "@/view/components/listTmpl"
import { apiUrls, deleteAlarmLinkMan } from "@/service/swagger/AlarmController";
import addlxrDialog from "@/view/components/dialog/addlxrDialog";
let timer = null

export default {
	components: {
		listTpml,
		addlxrDialog
	},
	data() {
		return {
			isshow: false,
			disabled: false,
			btntext: '获取验证码',
			newObj: {},
			ruleForm: {},
			pageData: {
				pageTitle: "报警联系人",
				filterOption: [
					{
						label: "姓名", // label名
						paramsName: "linkName", // 出参name值
						defaultValue: "", // 出参默认值
						componentsName: "lxrNameInput", // 组件名
					}
				],
				id: "",
				// 列表table 设置
				listOption: {
					// 列表上部btn组
					listBtns: [{
						label: "添加联系人",
						iconfont: "icon-folder-add",
						commandName: "addPerson",
					}],
					// 列表api
					listApi: {
						url: apiUrls.pageAlarmContactMan,
						type: "POST"
					},
					// 表头设置
					header: [{
						label: "姓名",
						width: "",
						propName: "linkName",
						align: "left",
					}, {
						label: "电话号码",
						width: "",
						propName: "mobile",
						align: "left",
					}, {
						label: "邮箱",
						width: "",
						propName: "email",
					},
					{
						label: "操作",
						width: "180",
						btns: [{
							label: "修改",
							commandName: "updatePerson"
						}, {
							label: "删除",
							commandName: "deletePerson"
						}],
						btnGroups: []
					}]
				}
			},
			rules: {
				linkName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
				mobile: [{
					required: true,
					trigger: 'blur',
					validator: (rule, value, callback) => {
						let reg = new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/)
						if (!value) {
							callback('请输入电话号码')
						} else if (!value.match(reg)) {
							callback('请输入正确的电话号码')
						} else {
							callback()
						}
					}				}],
				email: [
					{ required: true, message: '请输入电子邮箱', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱!', trigger: ['blur', 'change'] }
				]
			}
		}
	},
	methods: {
		listCommand(command, row, index) {
			// console.log("列表进行了操作：", command,row,index );
			if (command && this[command]) {
				this[command](row, index);
			}

		},
		refresh() {
			this.$refs.listTpml.search();
		},
		addPerson(row, index) {
			// this.$refs.addlxrDialog.open();
			this.newObj = {
				linkName: '',
				mobile: '',
				email: ''
			}
			this.isshow = true
		},
		updatePerson(row, index) {
			// this.$refs.addlxrDialog.init(row).open()
			this.isshow = true
			this.newObj = { ...row }
		},
		deletePerson(row, index) {
			this.$confirm("此操作将永久删除该联系人,是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "waring"
			}).then(() => {
				this.id = row.userId
				deleteAlarmLinkMan(this.id).then(ret => {
					if (ret.code === 0) {
						this.$message({
							message: "删除成功!",
							type: "success"
						})
						this.refresh()
					} else {
						this.$message({ message: "删除失败!", type: "error" })

					}
				})
			})

		},
		handleClose(ruleForm) {
			clearInterval(timer)
			this.btntext = '发送验证码'
			this.disabled = false
			this.isshow = false
			this.refresh()
		},
		handeleBtn() {
			this.isshow = false
		},
		submitForm() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					// 通过验证
					this.handleInit()
					this.isshow = false
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		handleInit() {
			let params = {
				linkName: this.newObj.linkName,
				mobile: this.newObj.mobile,
				email: this.newObj.email,
				checkCode: this.newObj.checkCode,
				userId: this.newObj.userId
			}
			saveAlarmContactMan(params).then(ret => {
				if (ret.code === 0) {
					this.refresh()
				}
			})
		},
		handleCode() {
			this.disabled = true
			let count = 30
			timer = setInterval(() => {
				count--
				this.btntext = `${count}s后重发`
				if (count == 0) {
					this.disabled = false
					this.btntext = '获取验证码'
					clearInterval(timer)
				}
			}, 1000)
			let params = {
				mailAddress: this.newObj.email
			}
			sendCheckCode(params).then(ret => {
				if (ret.code === 0) {
					this.btntext = '获取验证码'
					// this.disabled = false
					// clearInterval(timer)
					this.$message({
						message: '验证码已发至您的邮箱,三分钟有效!',
						type: 'success'					})
				} else {
					this.btntext = '重新发送'
					this.disabled = false
					clearInterval(timer)
					this.$message.error('验证码发送失败!')
				}
			})
		},

	}
}
</script>

<style>
</style>